import React, {lazy, Suspense, useEffect, useState} from 'react';
import {unstable_HistoryRouter as HistoryRouter, Route, Routes, Navigate} from "react-router-dom";
import history from "../utils/history";
import {persistor} from "../store";
import {PersistGate} from "redux-persist/integration/react";
import './index.scss'
import {Spin} from "antd";


//按需导入
//前台路由
const FrontDeskLayout = lazy(() => import('./frontDesk/FrontDeskLayout'))
const AdminLayout = lazy(() => import('./backStage/AdminLayout'))
const Course = lazy(() => import('./frontDesk/Course'))
const MyCourse = lazy(() => import('./frontDesk/Course/MyCourse'))
const Activity = lazy(() => import('./frontDesk/Activity'))
const Home = lazy(() => import('./frontDesk/Home'))
const Community = lazy(() => import('./frontDesk/Community'))
const Shopping = lazy(() => import('./frontDesk/Shopping'))
const ArticleContent = lazy(() => import('./frontDesk/Home/ArticleContent'))
const CourseContent = lazy(() => import('./frontDesk/Course/CourseContent'))
const UserCenter = lazy(() => import('./frontDesk/UserCenter'))
const ActivityContent = lazy(() => import('./frontDesk/Activity/ActivityContent'))
const BuyCourse = lazy(() => import('./frontDesk/Course/BuyCourse'))
const PaySuccess = lazy(() => import('./frontDesk/Course/PaySuccess'))
const MyCart = lazy(() => import('./frontDesk/Shopping/MyCart'))
const MyDownLoad = lazy(() => import('./frontDesk/MyDownLoad'))
const MyActivity = lazy(() => import('./frontDesk/Activity/MyActivity'))
const WriteArticle = lazy(() => import('./frontDesk/Home/WriteArticle'))
const BuyVip = lazy(() => import('./frontDesk/Home/BuyVip'))
// 后台路由
const Welcome = lazy(() => import("./backStage/Welcome"))
const ArticleSort = lazy(() => import("./backStage/AdminArticle/ArticleSort"))
const ArticleList = lazy(() => import("./backStage/AdminArticle/ArticleList"))
const AdminCourse = lazy(() => import("./backStage/AdminCourse"))
const AdminCourseOrder = lazy(() => import("./backStage/AdminCourse/AdminCourseOrder"))
const AdminActivity = lazy(() => import("./backStage/AdminActivity"))
const AdminShop = lazy(() => import("./backStage/AdminShop"))
const UserTable = lazy(() => import("./backStage/UserHandle/UserTable"))
const RoleManage = lazy(() => import("./backStage/AdminRole/RoleManage"))
const CharacterManage = lazy(() => import("./backStage/AdminRole/CharacterManage"))
const BuyShopping = lazy(() => import("./frontDesk/Shopping/BuyShopping"))
const MyDraft = lazy(() => import("./frontDesk/Home/MyDraft"))
const AdminLogin = lazy(() => import("./backStage/AdminLogin"))
const AdminCenter = lazy(() => import("./backStage/AdminRole/AdminCenter"))

const MyApp = () => {
    return (
        <HistoryRouter history={history}>
            <PersistGate loading={null} persistor={persistor}>
                {/*异步加载组件*/}
                <Suspense fallback={
                    <Spin className="example" size="large"/>}
                >
                    <Routes>
                        <Route path={"/"} element={<FrontDeskLayout/>}>
                            <Route index element={<Home/>}/>
                            <Route path="/article-content/:id" element={<ArticleContent/>}/>
                            <Route path="/download" element={<MyDownLoad/>}/>
                            <Route path="/course" element={<Course/>}/>
                            <Route path="/my-course" element={<MyCourse/>}/>
                            <Route path="/course-content/:id" element={<CourseContent/>}/>
                            <Route path="/buy-course/:course_id" element={<BuyCourse/>}/>
                            <Route path="/pay-success" element={<PaySuccess/>}/>
                            <Route path="/activity" element={<Activity/>}/>
                            <Route path="/activity-content" element={<ActivityContent/>}/>
                            <Route path="/my-activity" element={<MyActivity/>}/>
                            <Route path="/community" element={<Community/>}/>
                            <Route path="/my-cart" element={<MyCart/>}/>
                            <Route path="/shopping" element={<Shopping/>}/>
                            <Route path="/buy-shopping/:id" element={<BuyShopping/>}/>
                            <Route path="/user-center" element={<UserCenter/>}/>
                            <Route path="/write-article" element={<WriteArticle/>}/>
                            <Route path="/my-draft" element={<MyDraft/>}/>
                            <Route path="/buy-vip" element={<BuyVip/>}/>
                        </Route>
                        <Route path="/admin/login" element={<AdminLogin/>}/>
                        <Route path="/admin" element={<AdminLayout/>}>
                            <Route index element={<Welcome/>}/>
                            <Route path="/admin/article-sort" element={<ArticleSort/>}/>
                            <Route path="/admin/article-list" element={<ArticleList/>}/>
                            <Route path="/admin/course-table" element={<AdminCourse/>}/>
                            <Route path="/admin/course-order" element={<AdminCourseOrder/>}/>
                            <Route path="/admin/activity-table" element={<AdminActivity/>}/>
                            <Route path="/admin/shop-table" element={<AdminShop/>}/>
                            <Route path="/admin/user-table" element={<UserTable/>}/>
                            <Route path="/admin/admin-center" element={<AdminCenter/>}/>
                            <Route path="/admin/role-manage" element={<RoleManage/>}/>
                            <Route path="/admin/character-manage" element={<CharacterManage/>}/>
                        </Route>
                    </Routes>
                </Suspense>
            </PersistGate>
        </HistoryRouter>
    )
}

export default MyApp;